<template>
  <el-dialog :visible.sync="visible" width="32%" :before-close="onClose">
    <div slot="title" style="font-size: 14px;font-weight: 500;">
      更换托管号<span style="font-size: 12px; color: rgb(255, 153, 0); font-weight: normal;">（仅显示该群内，登录过企微宝云端版的企微号）</span>
    </div>
    <div class="change-organize">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="number" label="管理号">
          <template slot-scope="scope">
            <div class="company-account">
              <img class="account-cover" src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0" />
              <div class="account-info">
                <div class="name">闵雨微</div>
                <div class="desc">@志新</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="task_status" label="登录状态">
          <template slot-scope="scope">
            <div class="task-status">
              <span class="round open" />
              <span>离线</span>
              <span style="color: rgb(255, 73, 73);">（无法统计积分）</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="option" label="剩余托管群数量">
        </el-table-column>
        <template slot="empty">
          <TableEmpty />
        </template>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onClose">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      check: 0,
      check1: 0,
      tableData: []
    }
  },
  props: ['visible'],
  methods: {
    onClose() {
      this.$emit('handCloseDialog');
    }
  },
}
</script>
<style lang="scss" scoped>
.change-organize {
  .company-account {
    display: flex;
    align-items: center;

    .account-cover {
      width: 40px;
      height: 40px;
    }

    .account-info {
      margin-left: 8px;

      .name {
        font-size: 14px;
        line-height: 22px;
        color: #222333;
      }

      .desc {
        font-size: 12px;
        color: #f08b00;
        line-height: 22px;
      }

      .groupNums {
        font-size: 12px;
        color: #888999;
      }
    }

    .accept-account {
      font-size: 14px;
      line-height: 22px;
    }
  }
}
</style>